<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">{{detailTitle}}</span><router-link class="btn btn-xs btn-toinstlist "  :to="'/sites/index/'"> 返回站点监控列表</router-link></h5>
                    <div class="stayRight ">
                        <el-button @click="getList()" icon="star-off">刷新</el-button>
                    </div>

                </div>
            </section>
            <section class="ruleMain">
                <div class="ruleTab">
                    <template>
                        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" >
                            <el-tab-pane label="报警规则" name="first">
                                <div class="ruletable">
                                    <el-table :data="ruleList"  border style="width: 100%">
                                    	<el-table-column prop="siteName" label="站点名称" > </el-table-column>
                                        <el-table-column prop="name" label="监控项" > </el-table-column>
                                        <el-table-column prop="remark" label="规则描述" > </el-table-column>
                                        <el-table-column prop="status" label="状态" >
                                        <template scope="scope">
				                    		<el-tag size="small" :type="scope.row.status === '正常' ? 'success' : scope.row.status === '异常' ? 'danger' : 'info'" close-transition>{{scope.row.status}}</el-tag>
				                    	</template>
                                        </el-table-column>
                                        <el-table-column prop="isStart" label="规则是否启用" > </el-table-column>
                                        <el-table-column label="操作">
                                            <template scope="scope">
                                                <el-button  size="small"  type="text"   @click="showRulelist(scope.$index, ruleList)">修改 | </el-button>
                                                <el-button  size="small"  type="text" v-if="scope.row.isStart === '启用'"   @click="disabledRule(scope.$index, ruleList)">禁用  | </el-button>
                                                <el-button  size="small"  type="text" v-if="scope.row.isStart === '禁止'"   @click="abledRule(scope.$index, ruleList)">启用  | </el-button>
                                                <el-button  size="small"  type="text"   @click="delRule(scope.$index, ruleList)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <div class="rulebottom">
                                  <el-button type="primary" @click="showRulelist()" >设置报警规则</el-button>
                              </div>
                            </el-tab-pane>
                             <el-tab-pane label="监控图表" name="second">
                                <div class="siteChart">
                                    <div class="chartTop">
                                        <el-button type="info" @click="showChart('', 'code')" size="mini" class="setTimebtn" v-bind:class="{ active: isCodeActive }" >{{rateOravail}}</el-button>
                                        <el-button type="info" @click="showChart('', 'rpTime')" size="mini" class="setTimebtn" v-bind:class="{ active: isTimeActive }">响应时间</el-button>
                                        <div class="setTime">
                                          <el-button type="info" @click="showChart('6h', '')"  size="mini" class="setTimebtn" v-bind:class="{ active: is6hActive }">6小时</el-button>
                                          <el-button type="info" @click="showChart('12h', '')" size="mini" class="setTimebtn" v-bind:class="{ active: is12hActive }">12小时</el-button>
                                          <el-button type="info" @click="showChart('1d', '')" size="mini" class="setTimebtn" v-bind:class="{ active: is1dActive }">1天</el-button>
                                          <el-button type="info" @click="showChart('7d', '')" size="mini" class="setTimebtn" v-bind:class="{ active: is7dActive }">7天</el-button>
                                          <el-date-picker @change="pickTime" v-model="value3" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
                                        </div>
                                    </div>
                                    <div class="charAll">
                                        <div class="charTitle">
                                            {{chartText}}
                                        </div>
                                        <div class="chartMain">
                                            <div class="monChart" id="monChart"></div>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </div>

            </section>

            <!-- 规则 -->
            <el-dialog title="批量设置报警规则" :visible.sync="createRule" class="customDialog team" :lock-scroll="false">
                <div class="dialogmain">
                    <h6>您正在对站点 "{{detailTitle}}" 进行报警规则设置：</h6>
                    <div class="ruleditailMain">
                        <ul>
                            <li v-for="(item,index) in ruleEditList" :key="index" :rules="rules">
                                 <div class="liChild listatus" v-if="item.checkType === 'code' && dataType !== 'PING'"><el-checkbox v-model="cccode" @change="check(item.checkType)">状态码</el-checkbox>  </div>
                                 <div class="liChild listatus" v-if="item.checkType === 'code' && dataType === 'PING'"><el-checkbox v-model="cccode" @change="check(item.checkType)">丢包率</el-checkbox>  </div>
                                 <div class="liChild listatus" v-if="item.checkType === 'rptime'" ><el-checkbox v-model="cctime" @change="check(item.checkType)">响应时间（毫秒）</el-checkbox> </div>
                                 <div class="liChild lichose">
                                    <template>
                                        <el-select v-model="item.rule " clearable placeholder="请选择">
                                            <el-option v-for="item in creatoptions" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                 </div>
                                 <div class="liChild litips">
                                    <el-tooltip content="请输入大于0的整数" placement="top" effect="light">
                                        <el-input type="number" prop="ruleValue" v-model="item.ruleValue" placeholder="阈值仅支持输入数字" ></el-input>
                                    </el-tooltip>
                                 </div>
                                 <div class="liChild rulename">
                                    <label > 规则名称:</label>
                                    <el-input v-model="item.ruleName" class="naipt"></el-input>
                                 </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="createRule = false">取 消</el-button>
                    <el-button type="primary" @click="setRule()"  :disabled="istoTwo">确定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { queryBySiteConfId, modifySiteRule, roleList, enabledRule, resumeRule, deleteBatchSiteRule, queryChart } from '@/api/getData'
import echarts from 'echarts'

export default {
  data() {
    return {
      endTime: null,
      startTime: null,
      ruleTag: '1h',
      ruleType: 'code',
      activeName2: 'first',
      createRule: false,
      stepTwoRule: false,
      listLoading: true,
      isCodeActive: true,
      isTimeActive: false,
      is6hActive: false,
      is12hActive: false,
      is1dActive: false,
      is7dActive: false,
      cccode: false,
      cctime: false,
      istoTwo: true,
      showBy: null,
      chartLoading: false,
      choseItem: [],
      rateOravail: '可用性',
      chartText: '响应时间(毫秒)',
      detailTitle: '',
      dataType: '',
      threshold: '',
      ruleList: [],
      value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      ruleEditList: [{
        address: '',
        checkType: 'code',
        rule: '',
        ruleName: '',
        ruleValue: '',
        status: ''
      }, {
        address: '',
        checkType: 'rptime',
        rule: '',
        ruleName: '',
        ruleValue: '',
        status: ''
      }],
      role: [],
      listQuery: {
        id: this.$route.params.rid.split('_')[0],
        tag: this.$route.params.rid.split('_')[1]
      },
      creatoptions: [{
        value: '>=',
        label: '>='
      }, {
        value: '<',
        label: '<'
      }, {
        value: '>',
        label: '>'
      }, {
        value: '<=',
        label: '<='
      }, {
        value: '=',
        label: '='
      }, {
        value: '!=',
        label: '!='
      }],
      ruleStepForm: {
        siteId: '',
        number: '',
        rpTime: 1,
        rpTimeRule: '',
        rpTimeValue: '',
        rpTimeName: '',
        code: 1,
        codeRule: '',
        codeValue: '',
        ttUser: [],
        codeName: ''
      },
      rules: {
        ttUser: [
          { type: 'array', required: true, message: '联系人通知组', trigger: 'change' }
        ],
        ruleValue: [
          { required: true, message: '请选择监控频率', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    var now = new Date()
    var timestamp = new Date().getTime()
    var startTime = this.beforeTime(now, timestamp, 'hours', '1', '-')
    var endTime = this.beforeTime(now, timestamp, 'now', ' ', ' ')
    this.value3 = this.dateScope(startTime, endTime)
    this.startTime = startTime
    this.endTime = endTime
    var chartQuery = { id: this.listQuery.id, type: this.ruleType, startTime: this.startTime, endTime: this.endTime }
    this.monChart(chartQuery)
  },
  methods: {
    getList() {
      this.listLoading = true
      if (this.listQuery.tag === 'rule') {
        this.activeName2 = 'first'
      } else {
        this.activeName2 = 'second'
      }
      queryBySiteConfId(this.listQuery).then(response => {
        this.ruleList = response.data.rules
        if (response.data.rules) {
          if (response.data.rules.length === 1) {
            if (response.data.rules[0].checkType === 'code') {
              this.ruleEditList[0] = response.data.rules[0]
              this.cccode = true
              this.istoTwo = false
            } else {
              this.ruleEditList[1] = this.ruleList[0]
              this.cctime = true
              this.istoTwo = false
            }
          } else if (response.data.rules.length > 1) {
            this.ruleEditList = response.data.rules
            this.cccode = true
            this.cctime = true
            this.istoTwo = false
          }
        }
        this.dataType = response.data.type
        // console.log(this.ruleEditList, 'ruleEditList')
        if (this.ruleList) {
          this.ruleList.forEach(function(element) {
            // if (element.checkType === 'code') {
            //   element.checkType = '状态码'
            // } else {
            //   element.checkType = '响应时间（毫秒）'
            // }
            if (element.isStart === 0) {
              element.isStart = '启用'
            } else {
              element.isStart = '禁止'
            }
            if (element.status === 0) {
              element.status = '正常'
            } else {
              element.status = '异常'
            }
          }, this)
        }
        this.listLoading = false
        this.detailTitle = response.data.address
      })
      roleList().then(response => {
        this.role = response.data
      })
    },
    handleClick(tab, event) {
      var url = window.location.href
      if (tab.label === '监控图表') {
        this.listQuery.tag = 'charts'
        url = url.replace('_rule', '_charts')
        history.pushState(null, null, url)
      } else {
        this.listQuery.tag = 'rule'
        url = url.replace('_charts', '_rule')
        history.pushState(null, null, url)
      }
    },
    showRulelist(index, data) {
      const _this = this
      this.listLoading = true
      this.createRule = true
      if (data) {
        _this.showBy = 'updateSet'
        _this.ruleEditList = []
        _this.ruleEditList.push(data[index])
        if (data[index].checkType === 'rptime') {
          _this.cctime = true
        } else {
          _this.cccode = true
        }
        _this.istoTwo = false
      } else {
        _this.showBy = 'allSet'
        _this.ruleEditList = [{
          address: '',
          checkType: 'code',
          rule: '',
          ruleName: '',
          ruleValue: '',
          status: ''
        }, {
          address: '',
          checkType: 'rptime',
          rule: '',
          ruleName: '',
          ruleValue: '',
          status: ''
        }]
        if (_this.ruleList) {
          if (_this.ruleList.length === 0) {
            _this.cccode = false
            _this.cctime = false
            _this.istoTwo = true
          } else if (_this.ruleList.length === 1) {
            if (_this.ruleList[0].checkType === 'code') {
              this.ruleEditList[0] = _this.ruleList[0]
              _this.cccode = true
              _this.cctime = false
              _this.istoTwo = false
            } else {
              this.ruleEditList[1] = _this.ruleList[0]
              _this.cctime = true
              _this.cccode = false
              _this.istoTwo = false
            }
          } else if (_this.ruleList.length > 1) {
            _this.ruleEditList = _this.ruleList
            _this.cccode = true
            _this.cctime = true
            _this.istoTwo = false
          }
        }
      }
    },
    toSteptwo() {
      this.createRule = false
      this.stepTwoRule = true
    },
    pickTime(val) {
      this.startTime = val.split(' - ')[0]
      this.endTime = val.split(' - ')[1]
      var chartQuery = { id: this.listQuery.id, type: this.ruleType, startTime: this.startTime, endTime: this.endTime }
      this.monChart(chartQuery)
    },
    dateScope(startTime, endTime) {
      var start = new Date(startTime)
      var end = new Date(endTime)
      return [new Date(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours(), start.getMinutes()), new Date(end.getFullYear(), end.getMonth(), end.getDate(), end.getHours(), end.getMinutes())]
    },
    showChart(time, type) {
      this.chartLoading = true
      if (type === 'code') {
        this.isCodeActive = true
        this.isTimeActive = false
        this.ruleType = 'code'
      } else if (type === 'rpTime') {
        this.isCodeActive = false
        this.isTimeActive = true
        this.ruleType = 'rpTime'
      }
      var now = new Date()
      var timestamp = new Date().getTime()
      var startTime = this.startTime
      if (time === '6h') {
        this.is6hActive = true
        this.is12hActive = false
        this.is1dActive = false
        this.is7dActive = false
        startTime = this.beforeTime(now, timestamp, 'hours', '6', '-')
      } else if (time === '12h') {
        this.is6hActive = false
        this.is12hActive = true
        this.is1dActive = false
        this.is7dActive = false
        startTime = this.beforeTime(now, timestamp, 'hours', '12', '-')
      } else if (time === '1d') {
        this.is6hActive = false
        this.is12hActive = false
        this.is1dActive = true
        this.is7dActive = false
        startTime = this.beforeTime(now, timestamp, 'days', '1', '-')
      } else if (time === '7d') {
        this.is6hActive = false
        this.is12hActive = false
        this.is1dActive = false
        this.is7dActive = true
        startTime = this.beforeTime(now, timestamp, 'days', '7', '-')
      }
      var endTime = this.beforeTime(now, timestamp, 'now', ' ', ' ')
      this.startTime = startTime
      this.endTime = endTime
      this.value3 = this.dateScope(startTime, endTime)
      var chartQuery = { id: this.listQuery.id, type: this.ruleType, startTime: this.startTime, endTime: this.endTime }
      this.monChart(chartQuery)
    },
    monChart(obj) {
      queryChart(obj).then(response => {
        if (response.data.type === 'PING') {
          this.rateOravail = 'PING丢包率'
        }
        if (obj.type === 'rpTime') {
          this.chartText = '响应时间(毫秒)'
        } else if (obj.type === 'code' && response.data.type === 'PING') {
          this.chartText = 'PING丢包率(%)'
        } else {
          this.chartText = '可用性'
        }
        if (response.data.code === 500 || Object.keys(response.data.data[0]).length === 0) {
          return
        }
        var arr = response.data.data[0].series[0].values
        var x = new Array(arr.length)
        var y = new Array(arr.length)
        for (var i = 0; i < arr.length; i++) {
          x[i] = arr[i][0]
          y[i] = arr[i][1]
        }
        const product = echarts.init(document.getElementById('monChart'))
        product.clear()
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              var timestamp = params[0].name
              var value = params[0].data
              var now = new Date()
              now.setTime(timestamp)
              var year = now.getFullYear()
              var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
              var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
              var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
              var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
              var second = now.getSeconds() > 9 ? now.getSeconds() : '0' + now.getSeconds()
              return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second + '<br>' + value
            }
          },
          dataZoom: [{
            show: false,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
          ],
          calculable: true,
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 'auto',
              formatter: function(time) {
                var now = new Date()
                now.setTime(time)
                var year = now.getFullYear()
                var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
                var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
                var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
                var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
                var second = now.getSeconds() > 9 ? now.getSeconds() : '0' + now.getSeconds()
                return year + '-' + month + '-' + date + '\n' + hour + ':' + minute + ':' + second
              }
            },
            data: x
          },
          yAxis: {},
          series: [
            {
              type: 'line',
              name: '数据',
              smooth: true,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: 'rgb(255, 70, 131)'
                }
              },
              data: y
            }
          ]
        }
        product.setOption(option)
        this.chartLoading = false
      })
    },
    setRule() {
      const _this = this
      this.ruleStepForm.siteId = this.listQuery.id
      if (this.code === true) {
        this.code = 0
      } else {
        this.code = 1
      }
      var obj = this.submitValid(_this)
      if (obj) {
        this.$message({
          showClose: true,
          message: '勾选的数据中，不能存在空值',
          type: 'warning'
        })
        return
      }
      this.ruleEditList.forEach(function(element) {
        if (this.cccode === true) {
          _this.ruleStepForm.code = 0
        } else {
          _this.ruleStepForm.code = 1
        }
        if (this.cctime === true) {
          _this.ruleStepForm.rpTime = 0
        } else {
          _this.ruleStepForm.rpTime = 1
        }
        if (element.status === '正常') {
          element.status = 0
        } else if (element.status === '报警') {
          element.status = 1
        }
        if (element.checkType === 'code') {
          _this.ruleStepForm.codeName = element.ruleName
          _this.ruleStepForm.codeRule = element.rule
          _this.ruleStepForm.codeValue = element.ruleValue
        } else {
          _this.ruleStepForm.rpTimeName = element.ruleName
          _this.ruleStepForm.rpTimeRule = element.rule
          _this.ruleStepForm.rpTimeValue = element.ruleValue
        }
      }, this)
      // this.ruleStepForm.roleIds = this.ruleStepForm.ttUser.join(',')
      modifySiteRule(this.ruleStepForm).then(response => {
        this.dataArr = response.data.data
        this.listLoading = false
        this.createRule = false
        this.getList()
      })
    },
    submitValid(_this) {
      var list = _this.ruleEditList
      var isFlag = false
      for (var i = 0; i < list.length; i++) {
        var obj = list[i]
        var type = obj.checkType
        var rule = obj.rule
        var ruleName = obj.ruleName
        var ruleValue = obj.ruleValue
        if (this.cccode && type === 'code') {
          if (rule === '' || ruleName === '' || ruleValue === '') {
            isFlag = true
            break
          }
        }
        if (this.cctime && type === 'rptime') {
          if (rule === '' || ruleName === '' || ruleValue === '') {
            isFlag = true
            break
          }
        }
      }
      return isFlag
    },
    check(type) {
      if (this.showBy === 'allSet') {
        if (type === 'code') {
          this.cccode = event.target.checked
        } else {
          this.cctime = event.target.checked
        }
        if (!this.cccode && !this.cctime) {
          this.istoTwo = true
        } else {
          this.istoTwo = false
        }
      } else {
        if (type === 'code') {
          this.cccode = event.target.checked
          if (this.cccode) {
            this.istoTwo = false
          } else {
            this.istoTwo = true
          }
        } else {
          this.cctime = event.target.checked
          if (this.cctime) {
            this.istoTwo = false
          } else {
            this.istoTwo = true
          }
        }
      }
    },
    beforeTime(now, timestamp, type, value, tag) {
      if (type === 'now') {
        now.setTime(timestamp)
      }
      if (type === 'hours') {
        if (tag === '-') {
          now.setTime(timestamp - value * 60 * 60 * 1000)
        } else {
          now.setTime(timestamp + value * 60 * 60 * 1000)
        }
      }
      if (type === 'days') {
        if (tag === '-') {
          now.setTime(timestamp - value * 24 * 60 * 60 * 1000)
        } else {
          now.setTime(timestamp + value * 24 * 60 * 60 * 1000)
        }
      }
      var year = now.getFullYear()
      var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
      var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
      var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
      var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
      var second = now.getSeconds() > 9 ? now.getSeconds() : '0' + now.getSeconds()
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    },
    disabledRule(index, data) {
      const sel = {
        ids: data[index].id
      }
      this.$confirm('确定禁用规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        enabledRule(sel).then(response => {
          // console.log(response, 'response')
          this.dataArr = response.data.data
          this.getList()
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    abledRule(index, data) {
      const sel = {
        ids: data[index].id
      }
      this.$confirm('确定启用规则？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resumeRule(sel).then(response => {
          this.dataArr = response.data.data
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      }).catch(() => {
      })
    },
    delRule(index, data) {
      const sel = {
        ids: data[index].id
      }
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatchSiteRule(sel).then(response => {
          this.dataArr = response.data.data
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss">
ul,li{
    padding: 0;
    margin: 0;
    list-style:none ;
}
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
        }
    }
}

.btn-toinstlist{
  border: 1px solid #BBB;
  color: #666;
  text-shadow: none;
  vertical-align: middle;
  margin-top: 7px;
}
.ruleMain{
    padding:0 10px;

}
.rulebottom{
    margin-top: 10px;
}
.el-dialog__header{
    padding: 20px!important;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title{
        font-weight: 100;
    }
}
.el-dialog__body{
    padding: 10px 20px 30px;
    .el-checkbox-group{
        border: 1px solid #eee;
        height: 280px;
        padding: 10px 0;
        label:first-child{
            margin-left: 15px;
        }
    }
}
.ruleStepForm{
    margin-top: 20px
}
.console-step{
    height: 24px;
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    .step{
        width: 33%;
        float: left;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        color: #FFF;
        background: #cacaca;
        z-index: 1;
        text-align: center;
        position: relative;
        &:after{
            content: '';
            display: block;
            width: 16px;
            height: 24px;
            position: absolute;
            right: 0px;
            z-index: 9;
            top: 0px;
            border-top: 12px solid transparent !important;
            border-left: 12px solid #cacaca;
            border-bottom: 12px solid transparent !important;
            background-color: #FFF;
        }
    }
    .step-active{
        background-color: #00a0c7;
        &:after{
            border-color: #00a0c7;
        }
    }
}
.ruleditailMain{
    li{
        overflow: hidden;
        margin-bottom: 10px;
        .liChild{
            display: inline-block;
            margin-right: 10px;
        }
        .listatus{
            width: 110px;
            font-size: 12px;
            span{
            font-size: 12px;
            font-weight: 100;
            }
        }
        .lichose{
            width: 100px;
        }
        .litips{
            width: 150px;
        }
        .rulename{
            label{
                display: inline-block;
                font-weight: 100;
            }
            .naipt{
                width: 150px
            }
        }
    }
}
.chartTop{
  overflow: hidden;
  .setTime{
    float: right;
  }
      .setTimebtn{
        background: #666;
        padding: 4px 10px;
        border: none;
        border-radius: 0;
      }
      .active{
        background: #222;
      }
      .datePicker{
        margin-left: 10px;
      }
}
.chartMain{
  overflow: hidden;
  width: 100%;
  .monChart{
    width: 1100px;
    height: 300px;
  }
}

.charAll{
  border: 1px solid #ccd6e0;
  position: relative;
  margin-top: 20px;
}

.charTitle{
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 10px;
  background: #f8f9fb;
}


</style>


